<template>
	<view>
		<!-- 这是登录页面的账号输入的部分 -->
		<view class="inp_bg">
			<text class="inp_title">账号：</text>
			<view class="inp_box">
				<input class="inp_inside_box" type="text" v-model="account" placeholder="输入登录账号" />
			</view>
		</view>
		<view class="inp_bg" v-show="usecode == false">
			<text class="inp_title">密码：</text>
			<view class="inp_box">
				<input class="inp_inside_box" type="password" v-model="password" placeholder="输入登录密码" />
			</view>
		</view>
		<view class="inp_bg2" v-show="usecode == true">
			<text class="inp_title">验证码：</text>
			<view class="inp_inside_bg">
				<view class="inp_box2">
					<input class="inp_inside_box2" type="text" v-model="code" placeholder="输入验证码" />
				</view>
				<button class="code_btn" :disabled="code_btn_disable" @click="getCode">{{code_title}}</button>
			</view>
		</view>
		<view class="change_btn_bg">
			<image src="/static/images/login/change_icon.png" class="change_img" mode=""></image>
			<label class="lbl_btn" @click="checkboxChange">{{checkbox_title}}</label>
		</view>
		<view class="btn_bg">
			<button type="primary" @click="loginClick">登录</button>
		</view>
		<view class="btn_bg">
			<button type="default" @click="gotoSignUp">注册</button>
		</view>
	</view>
</template>

<script>
	import config from '../../common/config.js'
	export default {
		data() {
			return {
				account: "",
				password: "",
				code: "",
				usecode: false,
				code_title: "获取验证码",
				code_btn_disable: false,
				checkbox_title: "使用验证码登录"
			}
		},
		methods: {
			gotoSignUp() {
				uni.navigateTo({
					url: "/pages/signup/signup"
				})
			},
			checkboxChange() {
				this.usecode = !this.usecode;
				if (this.usecode == true) {
					this.checkbox_title = "使用密码登录";
				} else {
					this.checkbox_title = "使用验证码登录";
				}
			},
			getCode() {
				console.log(this.account)
				if (this.account == null || this.account == "") {
					uni.showToast({
						title: "请输入手机号",
						icon: 'error'
					})
				} else {
					let time = 60;
					this.code_btn_disable = true;
					let time_control = setInterval(() => {
						if (time == 0) {
							clearInterval(time_control);
							this.code_title = "获取验证码";
							time = 60;
							this.code_btn_disable = false;
						} else {
							this.code_title = time + "s后重新发送"
							time--;
						}
					}, 1000);
					let sendCodeUrl = config.baseURL + "user/sendcode";
					uni.request({
						url: sendCodeUrl,
						method: 'POST',
						data: {
							"phone": this.account
						},
						success: function(res) {
							console.log(res.data);
							if (res.data.isok == 1) {
								uni.showToast({
									title: "验证码已发送",
									icon: 'success'
								});
							} else {
								time = 0;
								uni.showToast({
									title: "验证码发送失败",
									icon: 'error'
								});
							}

						}
					});
					
				}
			},
			loginClick() {
				if (this.usecode == true) {
					// 这是使用验证码登录的请求
					uni.showLoading({
						title: "登录中"
					});
					if (this.account == null || this.account == "") {
						uni.showToast({
							title: "请输入账号",
							icon: 'error'
						})
						uni.hideLoading();

					} else {
						if (this.code == null || this.code == "") {
							uni.showToast({
								title: "请输入密码",
								icon: 'error'
							})
							uni.hideLoading();

						} else {
							let loginsmsUrl = config.baseURL + "user/login/sms";
							uni.request({
								url: loginsmsUrl,
								method: 'POST',
								data: {
									"account": this.account,
									"code": this.code
								},
								success: (res) => {
									console.log(res.data);
									uni.hideLoading();
									if (res.data.isok == 1) {
										uni.showToast({
											title: "登录成功",
											icon: 'success'
										})
										let token = res.data.data.token;
										uni.setStorage({
											key: "token",
											data: token,
											success() {
												uni.reLaunch({
													url: "/pages/index/index"
												});
											}
										})
									} else {
										uni.showToast({
											title: "登录失败" + res.data.error,
											icon: 'error'
										})
									}
								},
								fail(res) {
									uni.hideLoading();
									uni.showToast({
										title: "登录失败" + res.data.error,
										icon: 'error'
									})
								}
							})
						}
					}
				} else {
					// 这是使用账号密码登录的请求
					uni.showLoading({
						title: "登录中"
					});
					if (this.account == null || this.account == "") {
						uni.showToast({
							title: "请输入账号",
							icon: 'error'
						})
						uni.hideLoading();
					} else {
						if (this.password == null || this.password == "") {
							uni.showToast({
								title: "请输入密码",
								icon: 'error'
							})
							uni.hideLoading();
						} else {
							let loginURL = config.baseURL + "user/login/password";
							uni.request({
								url: loginURL,
								method: 'POST',
								data: {
									"account": this.account,
									"password": this.password
								},
								success: (res) => {
									console.log(res.data);
									uni.hideLoading();
									if (res.data.isok == 1) {
										uni.showToast({
											title: "登录成功",
											icon: 'success'
										})
										let token = res.data.data.token;
										uni.setStorage({
											key: "token",
											data: token,
											success() {
												uni.reLaunch({
													url: "/pages/index/index"
												});
											}
										})
									} else {
										uni.showToast({
											title: "登录失败" + res.data.error,
											icon: 'error'
										})
									}

								},
								fail: (res) => {
									console.log(res.errMsg);
									uni.hideLoading();
									uni.showToast({
										title: "登录失败",
										icon: 'error'
									})
								}
							})
						}
					}
				}
			}
		}
	}
</script>

<style>
	.inp_bg {
		margin: 20rpx 20rpx;
		width: 710rpx;
		height: 150rpx;
	}

	.inp_title {
		margin: 20rpx 10rpx;
		height: 50rpx;
		color: #5a5a5a;
	}

	.inp_box {
		margin: 20rpx 10rpx;
		width: 670rpx;
		height: 80rpx;
		text-align: left;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 15rpx;
		border-style: solid;
		border-width: 2rpx;
		border-color: #5a5a5a;
	}

	.inp_inside_box {
		width: 650rpx;
		height: 78rpx;
	}

	.inp_inside_bg {
		display: flex;
	}

	.inp_bg2 {
		margin: 20rpx 20rpx;
		width: 710rpx;
		height: 150rpx;

	}

	.inp_box2 {
		margin: 20rpx 10rpx;
		width: 400rpx;
		height: 80rpx;
		text-align: left;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 15rpx;
		border-style: solid;
		border-width: 2rpx;
		border-color: #5a5a5a;
	}

	.inp_inside_box2 {
		width: 360rpx;
		height: 78rpx;
	}

	.code_btn {
		width: 280rpx;
		font-size: 30rpx;
		height: 78rpx;
		margin: 20rpx 10rpx;
		text-align: center;
	}

	.btn_bg {
		margin: 50rpx;
		width: 650rpx;
	}

	.change_img {
		width: 60rpx;
		height: 60rpx;
	}

	.lbl_btn {
		color: #0d22e1;
	}

	.change_btn_bg {
		display: flex;
		align-items: center;
		justify-items: center;
		margin: 20rpx 20rpx;
		width: 710rpx;
	}
</style>